<template>
  <div class="project-cases">
    <div class="swiper-container" @mouseover="showNavigation = true" @mouseleave="showNavigation = false">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <item-card @showDetail="showDetail" />
        </div>
        <div class="swiper-slide">
          <item-card @showDetail="showDetail" />
        </div>
        <div class="swiper-slide">
          <item-card @showDetail="showDetail" />
        </div>
        <div class="swiper-slide">
          <item-card @showDetail="showDetail" />
        </div>
        <div class="swiper-slide">
          <item-card @showDetail="showDetail" />
        </div>
      </div>
      <div class="swiper-button-prev" @click="prev" />
      <div class="swiper-button-next" @click="next" />
    </div>
    <detaildialog :dialog-visible="dialogVisible" @dialogClose="dialogClose">
      <project-detail />
    </detaildialog>
  </div>
</template>

<script>
import detaildialog from '@/components/Dialog/detaildialog'
import Swiper from 'swiper'
import 'swiper/swiper.scss'
import itemCard from './itemCard'
import projectDetail from './projectDetail'
import moment from 'moment'
import drawImg from '@/components/Drawimg'
import { mapState } from 'vuex'
import ItemCard from './itemCard.vue'
export default {
  components: { detaildialog, itemCard, projectDetail },
  data() {
    return {
      showNavigation: false,
      dialogVisible: false,
      swiper: null
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  mounted() {
    this.setSwiper()
  },
  methods: {
    setSwiper() {
      const swiper = new Swiper('.swiper-container', {
        centeredSlides: false,
        slidesPerView: 'auto'
      })
      this.swiper = swiper
    },
    prev() {
        this.swiper.slidePrev()
    },
    next() {
        this.swiper.slideNext()
    },
    showDetail() {
      this.dialogVisible = true
    },
    dialogClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.project-cases {
  width: 100%;
  overflow: hidden;
  .swiper-container {
    position: relative;
    .swiper-slide {
      width: 480px;
      padding: 0 30px;
      position: relative;
    }
    .swiper-button-prev, .swiper-button-next{
        position:absolute;
        z-index:999;
        top:50%;
        left:10px;
        margin-top:-30px;
        width: 60px;
        height: 60px;
        background:url(../../assets/image/TransBIM/four/swiper-btn.png);
        cursor:pointer;
    }
    .swiper-button-next{
        background-position:0 -60px;
        left:auto;
        right:10px;
    }
  }
}
</style>
